<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.progress {
				width: 100px;
				height: 100px;
			}

			.progress circle {
				fill: none;
				stroke: #0066cc;
				stroke-width: 10;
				stroke-dasharray: 314;
				/* 圆周长 */
				stroke-dashoffset: 0;
				/* 初始偏移量 */
				transition: stroke-dashoffset 0.5s ease-out;
				/* 动画过渡效果 */
			}

			.progress.incomplete circle {
				stroke-dashoffset: calc(314 - (314 * var(--progress) / 100));
				/* 根据进度计算偏移量 */
			}
			.icon-example {
			  background-image: url('svg/loading.svg');
			  background-size: contain;
			  background-repeat: no-repeat;
			  /* 其他样式，如宽度、高度、位置等 */
			  height: 50px;
			  width: 50px;
			  color: red;
			}

		</style>
	</head>
	<body>
		<div class="icon-example">
			
		</div>
		<div class="progress incomplete" style="--progress: 75;">
			<svg class="progress" viewBox="0 0 100 100">
				<circle cx="50" cy="50" r="45"></circle>
			</svg>
		</div>
	</body>
</html>